<template>
  <div class="group-table-box">
    <Row class="group-top">

      <Col span="8" offset="16" class="group-right">
        <div class="input-item" style="margin-right: 0;">
          <Button type="info">新增分类</Button>
        </div>
      </Col>
    </Row>
    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :current="form.pageIndex"
        :page-size="10"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      form: {
        pageIndex: 1,
      },
      totalPageCount: 10,
      columns7: [
        {
          title: '优先级',
          type: 'index',
          align: 'center'
        },
        {
          title: '分类名称',
          key: 'groupName',
          align: 'center'
        },
        {
          title: '分类icon预览',
          key: 'issueTime',
          align: 'center'
        },
        {
          title: '分类下商品量',
          key: 'userName',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'price',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 450,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.success(params.index)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '上移'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '下移'),
              h('i-switch', { //数据库1是已处理，0是未处理
                props: {
                  type: 'primary',
                  //控制开关的打开或关闭状态，官网文档属性是value
                  value: this.tableData[params.index].isDelete == '1' ? false : true,
                  size: 'large'
                },
                scopedSlots: {
                    close: function (props) {
                        return '禁用'
                    },
                    open: function (props) {
                        return '启用'
                    }
                },
                style: {
                  marginLeft: '5px'
                },
                on: {
                  'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                                           //参数value是回调值，并没有使用到
                    this.switch(params.index, value) //params.index是拿到table的行序列，可以取到对应的表格值
                  }
                }
              },)
            ]);
          }
        }
      ],
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    onClickReset() {

    },
    onClickDeleteConfirm() {

    },
    check(index) {

    },
    success(index) {

    },
    remove(index) {

    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
</style>
